// 差旅费报销单
<template>
    <div class="formWrapper">
      <el-card class="box-card marginbottom10px">
        <div slot="header" class="clearfix">
          <span>差旅费报销单——基本信息</span>
        </div>
        <div class="text item">
          <el-form :inline="true" label-position="right" label-width="10vw" :model="basicInfo">
            <el-form-item label="报销人：">
            <el-input clearable size="medium" v-model="basicInfo.name"></el-input>
          </el-form-item>
            <el-form-item label="部门：">
              <el-autocomplete
                class="inline-input"
                v-model="basicInfo.sector"
                :fetch-suggestions="querySearch"
                clearable
                size="medium"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item label="单据张数：">
              <el-input clearable size="medium" v-model.number="basicInfo.formCount"></el-input>
            </el-form-item>
            <el-form-item label="同行人：">
              <el-input clearable size="medium" v-model="basicInfo.partner"></el-input>
            </el-form-item>
            <el-form-item label="已借金额：">
              <el-input clearable size="medium" v-model="basicInfo.borrowAmount"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>差旅费报销单——行程信息</span>
        </div>
        <div class="text item">
          <table class="formTable">
            <tr>
              <td>起止日期</td>
              <td>出发地点</td>
              <td>目的地点</td>
              <td>在途交通费</td>
              <td>住宿费</td>
              <td>出差天数</td>
              <td>包干标准</td>
              <td>公务杂费</td>
              <td>合计</td>
            </tr>
            <tr v-for="(item,index) of travelDetail" :key="index">
              <td>
                <el-date-picker
                v-model="item.during"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
              </td>
              <td>
                <el-input
                  class="bordernone"
                  size="medium"
                  v-model="item.from"
                >
                </el-input>
              </td>
              <td>
                <el-input
                  class="bordernone"
                  size="medium"
                  v-model="item.to"
                >
                </el-input>
              </td>
              <td>
                <el-input
                  class="bordernone"
                  size="medium"
                  v-model="item.travelFee"
                >
                </el-input>
              </td>
              <td>
                <el-input
                  class="bordernone"
                  size="medium"
                  v-model="item.stayFee"
                >
                </el-input>
              </td>
              <td>
                <el-input
                  class="bordernone"
                  size="medium"
                  v-model.number="item.travelDays"
                >
                </el-input>
              </td>
              <td>
                <el-input
                  class="bordernone"
                  size="medium"
                  v-model="item.baoGanBiaoZhun"
                >
                </el-input>
              </td>
              <td>
                <el-input
                  class="bordernone"
                  size="medium"
                  v-model="item.officialIncidentalExpenses"
                >
                </el-input>
              </td>
              <td>
                <el-input
                  class="bordernone"
                  size="medium"
                  v-model="item.lineTotal"
                >
                </el-input>
              </td>
            </tr>
            <tr>
              <td colspan="3">合 &nbsp; &nbsp; 计</td>
              <td>{{travelFeeTotal}}</td>
              <td>{{stayFeeTotal}}</td>
              <td>{{travelDaysTotal}}</td>
              <td>/</td>
              <td>{{officialIncidentalExpensesTotal}}</td>
              <td>{{lineTotalTotal}}</td>
            </tr>
          </table>
        </div>
      </el-card>
      <div class="btnBox">
        <el-popover
          placement="top-start"
          trigger="hover"
          content="保存至草稿箱">
          <el-button round slot="reference">保存</el-button>
        </el-popover>
        <el-button round @click="handleSubmit">提交</el-button>
      </div>
    </div>
</template>

<script>
export default {
  name: 'TravelExpenseClaim',
  data () {
    return {
      basicInfo: {
        name: '',
        sector: '',
        formCount: '',
        partner: '',
        borrowAmount: ''
      },
      sectorSuggestions: [],
      tableData: [],
      travelDetail: [
        {
          'during': '',
          'from': '',
          'to': '',
          'travelFee': '',
          'stayFee': '',
          'travelDays': '',
          'baoGanBiaoZhun': '',
          'officialIncidentalExpenses': '',
          'lineTotal': ''
        }, {
          'during': '',
          'from': '',
          'to': '',
          'travelFee': '',
          'stayFee': '',
          'travelDays': '',
          'baoGanBiaoZhun': '',
          'officialIncidentalExpenses': '',
          'lineTotal': ''
        }, {
          'during': '',
          'from': '',
          'to': '',
          'travelFee': '',
          'stayFee': '',
          'travelDays': '',
          'baoGanBiaoZhun': '',
          'officialIncidentalExpenses': '',
          'lineTotal': ''
        }, {
          'during': '',
          'from': '',
          'to': '',
          'travelFee': '',
          'stayFee': '',
          'travelDays': '',
          'baoGanBiaoZhun': '',
          'officialIncidentalExpenses': '',
          'lineTotal': ''
        }
      ]
    }
  },
  methods: {
    querySearch (queryString, cb) {
      let sectorSuggestions = this.sectorSuggestions
      let results = queryString ? sectorSuggestions.filter(this.createFilter(queryString)) : sectorSuggestions
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll () {
      return [
        {'value': '策略网联部', 'address': '123'},
        {'value': '营销部', 'address': '123'},
        {'value': '生产车间', 'address': '123'}
      ]
    },
    handleSubmit () {
      console.log(this.basicInfo)
      console.log(this.travelDetail)
    }
  },
  mounted () {
    this.sectorSuggestions = this.loadAll()
  },
  computed: {
    travelFeeTotal () {
      let travelFeeTotal = null
      for (let i = 0; i < this.travelDetail.length; i++) {
        travelFeeTotal += Number(this.travelDetail[i].travelFee)
      }
      return travelFeeTotal
    },
    stayFeeTotal () {
      let stayFeeTotal = null
      for (let i = 0; i < this.travelDetail.length; i++) {
        stayFeeTotal += Number(this.travelDetail[i].stayFee)
      }
      return stayFeeTotal
    },
    travelDaysTotal () {
      let travelDaysTotal = null
      for (let i = 0; i < this.travelDetail.length; i++) {
        travelDaysTotal += Number(this.travelDetail[i].travelDays)
      }
      return travelDaysTotal
    },
    officialIncidentalExpensesTotal () {
      let officialIncidentalExpensesTotal = null
      for (let i = 0; i < this.travelDetail.length; i++) {
        officialIncidentalExpensesTotal += Number(this.travelDetail[i].officialIncidentalExpenses)
      }
      return officialIncidentalExpensesTotal
    },
    lineTotalTotal () {
      let lineTotalTotal = null
      for (let i = 0; i < this.travelDetail.length; i++) {
        lineTotalTotal += Number(this.travelDetail[i].lineTotal)
      }
      return lineTotalTotal
    }
  }
}
</script>

<style scoped>
  .text>div{
    margin-bottom: 5px;
  }
  .marginright10px{
    margin-right:10px;
  }
  .marginbottom10px{
    margin-bottom: 10px;
  }
  .formTable{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
  }
  table,table tr th, table tr td {
    border:0.6px solid #ccc;
    text-align: center;
    line-height: 200%;
  }
  .bordernone >>> .el-input__inner{
    border:none;
    text-align: center;
  }
  .btnBox{
    margin-top: 10px;
    text-align: right;
  }
  .formWrapper >>> .el-form-item{
    margin-bottom: 10px;
  }
  .formWrapper >>> .el-card__body{
    padding: 5px;
  }
  .formWrapper >>> .el-card__header{
    padding: 8px 20px;
  }
</style>
